<template>
	<view>
		<!-- <uni-nav-bar left-icon="back" left-text="" right-text="" title='个人中心'></uni-nav-bar> -->
		<view v-if="isshow" class="oldinfo">
			<view class="item">
				<view class="left userimage">
					头像
				</view>
				<view class="right">
					<image :src="imageurl" mode=""></image>
				</view>
			</view>

			<view class="item">
				<view class="left">
					用户名
				</view>
				<view style="font-size: 26rpx;color: #999;" class="right">
					{{username}}
				</view>
			</view>

			<view class="item">
				<view class="left">
					昵称
				</view>
				<view class="right" style="font-size: 26rpx;color: #999;">
					{{nickname}}
				</view>
			</view>

			<view class="item last">
				<view class="left">
					手机号
				</view>
				<view class="right" style="font-size: 26rpx;color: #999;">
					{{tel}}
				</view>
			</view>
			<button type="default" @click="edit">修改个人信息</button>
			<button type="default" @click="out">退出登录</button>

		</view>


		<view v-else class="oldinfo">
			<form @submit="formSubmit">
				<view class="item ">
					<view style="margin-top: 40rpx;" class="left edit one">
						头像
					</view>
					<view class="right">

						<image @tap="uploadIcon" :src="imageurl" mode=""></image>
						<view @tap="uploadIcon" style="font-size: 24rpx;color: #999;margin-left: 10rpx;" class="">
							选择头像
						</view>
					</view>
				</view>

				<view class="item">
					<view class="left edit">
						用户名 <text style="margin-left: 10rpx;font-size: 24rpx;color: #999;">不可更改</text>
					</view>
					<view class="right">
<!-- 						<view style="l-h" class="">
							{{username}}
						</view> -->
						<input style="width: 300rpx;" name=username disabled="true" type="text" :value="username" />
					</view>
				</view>

				<view class="item">
					<view class="left edit">
						昵称
					</view>
					<view class="right">
						<input name=nickname type="text" :value="nickname" />
					</view>
				</view>


				<view class="item last">
					<view class="left edit">
						手机号
					</view>
					<view class="right">
						<input name=tel type="text" :value="tel" />
					</view>
				</view>
				<button form-type="submit" type="default">更新</button>
			</form>
		</view>

	</view>
</template>

<script>
	import mix from "@/mixins/index.js"
	import {
		getMemberInfo,
		updateMemberInfo
	} from '../../../api/my/login/login.js'
	import baseUrl from "@/api/baseUrl.js"

	export default {
		mixins: [mix],
		data() {
			return {
				nickname: "",
				username: '',
				isshow: true,
				tel: '',
				has: true,
				imageurl: '',
				datalist: '',
				id: ''
			};
		},
		methods: {
			// 上传头像
			uploadIcon() {
				var _this = this
				uni.chooseImage({
					count: 1,
					success(res) {
						console.log(res);
						var that = _this
						uni.uploadFile({
							url: baseUrl + "/lejuClient/login/uploadAvatar",
							filePath: res.tempFilePaths[0],
							name: "file",
							success(result) {
								console.log(result);
								console.log(JSON.parse(result.data).data.fileUrl);
								var arr = JSON.parse(result.data)
								if (arr.success) {
									console.log(this.has);
									console.log(that.has);
									console.log(_this.has);
									_this.has = false
									var arr = JSON.parse(result.data)
									console.log(arr.data.fileUrl);
									_this.imageurl = arr.data.fileUrl
								}

							}
						})
					}
				})
			},
			formSubmit(e) {
				console.log('111');
				var value = e.detail.value
				console.log(value);
				var obj = uni.getStorageSync('userinfo')
				console.log(obj);
				obj.nickname = value.nickname
				obj.phone = value.tel;
				obj.icon = this.imageurl
				updateMemberInfo(obj).then(res => {
					console.log(res);
					if (res.success) {
						uni.showToast({
							title: "修改成功"
						})
						this.nickname = value.nickname
						this.username = value.username
						this.tel = value.tel
						this.icon = this.imageurl

						uni.setStorageSync('userinfo', {
							"nickname": value.nickname,
							"username": value.username,
							"phone": value.tel,
							"icon": this.imageurl,
						})
					}

					this.isshow = true

				})
			},
			// 修改个人信息
			edit() {
				this.isshow = false
			},
			//退出登录
			out() {
				uni.removeStorageSync('token'),
					uni.showToast({
						title: "退出成功,即将返回"
					})

				setTimeout(function() {
					uni.navigateTo({
						url: "../register/register"
					})
				}, 1700)

			}
		},
		onLoad(e) {
			this.id = e.id
			getMemberInfo({
				"token": uni.getStorageSync('token'),
			}).then(res => {
				console.log(res);
				this.datalist = res.data.userInfo
				this.nickname = res.data.userInfo.nickname ? res.data.userInfo.nickname : '暂未设置昵称';
				this.username = res.data.userInfo.username;
				this.tel = res.data.userInfo.phone ? res.data.userInfo.phone : '暂未设置手机号';
				this.imageurl = this.datalist.icon
			})
		}
	}
</script>

<style lang="scss">
	.oldinfo {
		width: 710rpx;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		margin: 20rpx auto;
		padding: 20rpx 40rpx;
		box-sizing: border-box;

		button {
			width: 630rpx;
			margin-top: 40rpx;
			background-color: #1C4B47;
			color: white;
			box-sizing: border-box;
		}

		.item {
			display: flex;
			justify-content: space-between;
			padding: 40rpx 0;
			border-bottom: 2rpx solid #eee;
			box-sizing: border-box;

			.one {
				height: 80rpx;
				box-sizing: border-box;
			}

			.userimage {
				margin-top: 40rpx;
				box-sizing: border-box;
			}

			.edit {
				line-height: 80rpx;
				box-sizing: border-box;
			}

			.right {
				image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
					border: 2rpx solid #eee;
					box-sizing: border-box;
				}

				.uploadimage {
					width: 200rpx;
					height: 80rpx;
					box-sizing: border-box;
				}

				input {
					border: 2rpx solid #eee;
					width: 400rpx;
					height: 80rpx;
					padding: 0 20rpx;
					border-radius: 12rpx;
					box-sizing: border-box;
				}
			}
		}

		.last {
			border-bottom: none;
			box-sizing: border-box;
		}

	}
</style>
